<template>
  <view class="custom-popup" v-if="visible">
    <view class="popup-content">
      <image :src="imageSrc" class="popup-image" mode="widthFix"></image>
	  <view class="popup-text-box">
		  <view class="popup-text">
		  		  <view class="paragraph">
		  			  龙殿守卫向您致意， 尊贵的华夏公民！	  
		  		  </view>
		  		  <view class="paragraph">
		  		  	  欢迎您开启了属于自己的秘密空间。
					  您将用信任的手指点开空间的大门，让您宝贵的物品，收纳入可以随时召唤的空间里。
		  		  </view>
		  		<view class="paragraph">
		  			 您可以通过微信、短信以及电话等形式，进行物品召唤。
		  		</view>
		  </view>
		  
		  <view class="popup-buttons">
		    <view class="popup-button" :class="[userCheck ? '' : 'disabled']"  @click="handleClose"> 进入空间 </view>
		  </view>
		  
		 <view class="link-area" >
		    
			<view>
				<text>已阅读并同意</text>
				<label class="radio">
					<radio value="r1" :checked="userCheck" @click="toggleCheck" />
				</label>
		    </view>
			
		    <navigator url="/pages/founderInfo/userTerms">
		    	<text class="link">《服务协议》</text>
		    </navigator>
		  </view>
	  </view>
  
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  userCheck: false,
      isShow: false,
      imageSrc: '/static/longdian.png',
      textContent: ''
    };
  },
  
  props: {
      modelValue: {
        type: Boolean,
        default: false
      }
  },
	computed: {
		visible: {
		  get() {
			return this.modelValue;
		  },
		  set(newValue) {
			this.$emit('update:modelValue', newValue);
		  }
		}
	  },
  methods: {
    showPopup(imageSrc, textContent) {
      this.imageSrc = imageSrc;
      this.textContent = textContent;
    },
	toggleCheck(e) {
		this.userCheck = !this.userCheck;
	},
    handleClose() {
	  if (!this.userCheck) {
		  uni.showToast({
		  	icon: 'none',
		  	title: '请先阅读服务协议并勾选单选按钮',
		  	duration: 2000
		  })
		  return;
	  }
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.custom-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 1100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  position: relative;
  color: #f5d59d;
  background-color: #fff;
  padding: 14rpx 0;
  width: 710rpx;
  font-size: 0;
  box-shadow: 0px 2px 6px #e3a48c inset, 0 -6px 6px #f5a78a inset;
}
.popup-image {
  width: 100%;
  height: 760rpx;
}
.popup-text-box {
	position: absolute;
	top: 360rpx;
	padding: 0 40rpx;
}
.popup-text {
  line-height: 1.2;
}
.paragraph {
	font-size: 26rpx;
	text-align: center;
	text-indent: 2em;
	margin-bottom: 4rpx;
}

.popup-buttons {
  display: flex;
  justify-content: center;
  margin: 24rpx 0;
}
.link-area {
	display: flex;
	justify-content: center;
	font-size: 28rpx;
}
.link {
	color: #4e69bb;
}
.popup-button {
  color: #fff;
  padding: 10rpx 40rpx;
  width: 400rpx;
  border-radius: 100rpx;
  letter-spacing: 10rpx;
  cursor: pointer;
  font-size: 38rpx;
  font-weight: bold;
  background: #dcaa7a;
}
.disabled {
	color: grey;
	background: lightgray;
}
</style>